<script>
import ReviewApi from '../../api/review';

export default {
    props: ["bookId"],
    data() {
        return {
            reviewList: [],
            total: 0,
            pageSize: 7,
            curPage: 0,
            limit: -1,
            offset: -1
        }
    },
    methods: {
        async getReviewList(limit = -1, offset = -1) {
            try {
                let orderBy = "created_time";
                let sort = "DESC";
                const api = new ReviewApi();
                let res = await api.findAllByBookId(this.bookId, limit, offset, orderBy, sort);
                this.reviewList = res.data;
                console.log(this.reviewList);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        async getCount() {
            try {
                const api = new ReviewApi();
                let res = await api.getCountByBookId(this.bookId);
                this.total = res.data.total;
                console.log(this.total);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        goto(page) {
            this.curPage = page;
            this.offset = (page - 1) * this.pageSize;
            this.getReviewList(this.limit, this.offset);
        },
        async getData() {
            await this.getCount();
            await this.getReviewList(this.limit, this.offset);
        },
        async updateUseful(review) {
            review.useful += 1;
            try {
                const api = new ReviewApi();
                await api.updateReviewUseful(review.id);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        },
        async updateUseless(review) {
            review.useless += 1;
            try {
                const api = new ReviewApi();
                await api.updateReviewUseless(review.id);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        }
    },
    async mounted() {
        this.curPage = 1;
        this.limit = this.pageSize;
        this.offset = 0;
        if (this.bookId) {
            this.getData();
        }
    },
    watch: {
        bookId: function (newVal) {
            newVal && this.getData();
        }
    }
}
</script>

<template>
    <div class="review-list">
        <ul>
            <li v-for="review in reviewList" :key="review.id">
                <div>
                    <span class="author">{{ review.nickname }}说：</span>
                    <span class="title">{{ review.title }}</span>
                    <p class="content">{{ review.content }}</p>
                </div>
                <div class="action">
                    <span class="useful"><a href="javascript:void(0);" @click="updateUseful(review)"><img src="../../assets/good.png"></a>{{
                        review.useful }}</span>
                    <span class="useless"><a href="javascript:void(0);" @click="updateUseless(review)"><img src="../../assets/bad.png"></a>{{
                        review.useless }}</span>
                </div>
            </li>
        </ul>
        <my-pagination :total="total" :page-size="pageSize" :cur-page="curPage" :show-info="true" @goto="goto" />
    </div>
</template>

<style scoped>
.review-list li {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: rgb(249, 252, 255);
    margin: 8px auto;
    padding: 16px;
    border-radius: 16px;
}

li:hover {
    background-color: #ffecec;
}

.review-list li div:first-of-type {
    flex: 1 1 auto;
}

.review-list li div.action {
    flex: 0 1 auto;
}

.review-list li div.action span {
    margin: 0 10px;
}

.action .useful a {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../../assets/good.png);
}

.action .useful a:hover {
    background-image: url(../../assets/good-hover.png);
}

.action .useless a {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../../assets/bad.png);
}

.action .useless a:hover {
    background-image: url(../../assets/bad-hover.png);
}
</style>